﻿import QtQuick 2.0

// CustomChart的子项，请不要单独食用

Canvas{
    id: canvas
    x: leftMargin; y: topMargin
    width: parent.width - leftMargin - rightMargin
    height: parent.height - topMargin - bottomMargin
    onPaint: {

//        console.time("Chart-PaintTime")
//        console.log("Size", minX, maxX, minY, maxY)
        let ctx = canvas.getContext("2d")
        ctx.clearRect(0, 0, width, height)

        for(let i = 0; i < normPointList.length; i ++){
            let curve = normPointList[i]
            let bezier = bezierPointList[i]
            let cColor = lineColorList[i]
            let cWidth = lineWidthList[i]  * lineWidthBase
            let cType = curveTypeList[i]

            // Case1 绘制点 =======================================
            if(cType === 0){

                ctx.fillStyle = cColor
                let scatterType = scatterTypeList[i]

                for(let c = 0; c < curve.length; c += 2){


                    ctx.beginPath()
                    let cX = curve[c]*width, cY = height - curve[c+1]*height  // 中心点坐标
                    if(scatterType === 0){      // 圆
                        ctx.arc(cX, cY, cWidth*1.5, 0, 2*Math.PI)
                        ctx.fill()
                    }else if(scatterType === 1){    // 矩形
                        ctx.rect(cX-1.5*cWidth, cY-1.5*cWidth, cWidth*3, cWidth*3)
                        ctx.fill()
                    }else if(scatterType === 2){          // 三角形
                        ctx.moveTo(cX, cY-cWidth*2)
                        ctx.lineTo(cX+1.7*cWidth, cY+cWidth)
                        ctx.lineTo(cX-1.7*cWidth, cY+cWidth)
                        ctx.lineTo(cX, cY-cWidth*2)
                        ctx.fill()
                    }else if(scatterType === 4){        // 空心圆（画两个圆
                        ctx.arc(cX, cY, cWidth*1.5, 0, 2*Math.PI)
                        ctx.fill()
                        ctx.beginPath()
                        ctx.fillStyle = "white"
                        ctx.arc(cX, cY, cWidth*1.3 - 2, 0, 2*Math.PI)
                        ctx.fill()
                        ctx.fillStyle = cColor
                    }

                }

            }

            // Case2 绘制曲线 =====================================
            else if(cType === 2){
                if(curve.length===0){
                    return
                }
                if(curve.length === 2){     // 如果长度等于2，说明只给了一个点，就画一个点吧 (这块的2一个是x坐标一个是y坐标)
                    ctx.beginPath()
                    ctx.fillStyle = cColor
                    ctx.arc(curve[0]*width, height-curve[1]*height, cWidth*2, 0, 2*Math.PI)
                    ctx.fill()
                    continue
                }
                ctx.beginPath()
                ctx.moveTo(curve[0]*width, height-curve[1]*height)
                for(let c = 2; c < curve.length; c +=2){
                    ctx.bezierCurveTo(bezier[(c-2)*2]*width, height-bezier[(c-2)*2+1]*height,     // 控制点1
                                      bezier[(c-2)*2+2]*width, height-bezier[(c-2)*2+3]*height,     // 控制点2
                                      curve[c]*width, height-curve[c+1]*height)               // 目标点

                }
                ctx.strokeStyle = cColor
                ctx.lineWidth = cWidth
                ctx.stroke()
            }

            // Case3 绘制直线 ===================================
            else if(cType === 1){


                let scatterType = scatterTypeList[i]

                if(curve.length===0 || curve.length===2){
                    return
                }
                ctx.beginPath()
                for(let c = 0; c+2 < curve.length; c += 2){

                    ctx.moveTo(curve[c]*width, height-curve[c+1]*height)
                    if(scatterType === 3){      // 需要画一个虚线
                        let dotLength = cWidth * 10
                        let startX = curve[c]*width
                        let startY = height-curve[c+1]*height
                        let endX = curve[c+2]*width
                        let endY = height-curve[c+3]*height
                        let curX = startX
                        let curY = startY
                        // 计算 x/y的变化比例
                        let dx = (endX-startX) / Math.sqrt((endX-startX)*(endX-startX) + (endY-startY)*(endY-startY))
                        let dy = (endY-startY) / Math.sqrt((endX-startX)*(endX-startX) + (endY-startY)*(endY-startY))
                        // 当cur处于start和end之间时
                        let whileCount = 0
                        while(isBetween(startX, curX, endX) && isBetween(startY, curY, endY)){

                            if(whileCount > 10000){     // 防止不知道哪来的bug导致死循环
                                console.log("CustomChart-drawDottedLine-isBetween-JudgeWrong")
                                console.log("---> X:", startX, curX, endX)
                                break;
                            }
                            whileCount ++


                            curX += dx * dotLength
                            curY += dy * dotLength
                            if(!isBetween(startX, curX, endX)){         // 滑到一条线的最后快冒出去了 就不要再画了
                                curX = endX
                                curY = endY
                            }
                            ctx.lineTo(curX, curY)
                            curX += dx * dotLength
                            curY += dy * dotLength
                            ctx.moveTo(curX, curY)

                        }

                    }else{      // 不需要虚线，直接过去了
                        ctx.lineTo(curve[c+2]*width, height-curve[c+3]*height)
                    }

                }
                ctx.strokeStyle = cColor
                ctx.lineWidth = cWidth
                ctx.stroke()
            }

        }

//        console.timeEnd("Chart-PaintTime")

        refreshFinished()

    }
}
